<template>
	<div class="sys-server-container">
		<el-row :gutter="8">
			<el-col :md="12" :sm="24">
				<el-card shadow="hover" header="程序运行情况">
					<table class="sysInfo_table">
						<tr>
							<td class="sysInfo_td">进程名称：</td>
							<td class="sysInfo_td">{{ state.systemMonitor.processName }}</td>
						</tr>
						<tr>
							<td class="sysInfo_td">进程占用内存：</td>
							<td class="sysInfo_td">{{ state.systemMonitor.memoryUsage }}MB</td>
						</tr>
						<tr>
							<td class="sysInfo_td">程序运行时间：</td>
							<td class="sysInfo_td">{{ state.systemMonitor.totalProcessorTime }}</td>
						</tr>
						<tr>
							<td class="sysInfo_td">程序线程数：</td>
							<td class="sysInfo_td">{{ state.systemMonitor.count }}</td>
						</tr>
						<tr>
							<td class="sysInfo_td">总内存：</td>
							<td class="sysInfo_td">{{ state.systemMonitor.totalMemory }}MB</td>
						</tr>
						<tr>
							<td class="sysInfo_td">GC情况：</td>
							<td class="sysInfo_td">{{ state.systemMonitor.gcCollections }}</td>
						</tr>
						
					</table>
				</el-card>
			</el-col>
			
		</el-row>

		<el-row :gutter="8">
			<el-col :md="24" :sm="24">
				<el-card shadow="hover" header="程序集信息" style="margin-top: 5px; --el-card-padding: 10px">
					<div v-for="d in state.assemblyInfo" :key="d.name" style="display: inline-block; margin: 4px; text-align: left">
						<el-tag round>
							<div style="display: inline-flex">
								<div style="">{{ d.name }}</div>
								<div style="color: black; font-size: 9px; margin-left: 3px">v{{ d.version }}</div>
							</div>
						</el-tag>
					</div>
				</el-card>
			</el-col>
		</el-row>

		
	</div>
</template>

<script lang="ts" setup name="sysServer">
import { onActivated, onDeactivated, onMounted, reactive } from 'vue';

import { getAPI } from '/@/utils/axios-utils';
import { SysServerApi } from '/@/api-services';

const state = reactive({
	machineBaseInfo: [] as any,
	machineUseInfo: [] as any,
	machineDiskInfo: [] as any,
	assemblyInfo: [] as any,
	systemMonitor:[] as any,
	timer: null as any,
});

onMounted(async () => {
	loadMachineBaseInfo();
	loadMachineUseInfo();
	loadMachineDiskInfo();
	loadAssemblyInfo();
	loadsystemMonitorInfo();
});

// 服务器配置信息
const loadMachineBaseInfo = async () => {
	var res = await getAPI(SysServerApi).apiSysServerServerBaseGet();
	state.machineBaseInfo = res.data.result;
};

// 服务器内存信息
const loadMachineUseInfo = async () => {
	var res = await getAPI(SysServerApi).apiSysServerServerUsedGet();
	state.machineUseInfo = res.data.result;
};

const loadsystemMonitorInfo = async () => {
	var res = await getAPI(SysServerApi).apiSysGetProcessUsedUsedGet();
	state.systemMonitor = res.data.result;
};

// 服务器磁盘信息
const loadMachineDiskInfo = async () => {
	var res = await getAPI(SysServerApi).apiSysServerServerDiskGet();
	state.machineDiskInfo = res.data.result;
};

// 框架程序集信息
const loadAssemblyInfo = async () => {
	var res = await getAPI(SysServerApi).apiSysServerAssemblyListGet();
	state.assemblyInfo = res.data.result;
};

// 实时刷新内存
const refreshData = () => {
	loadMachineUseInfo();
};

onActivated(() => {
	state.timer = setInterval(() => {
		refreshData();
	}, 10000);
});

onDeactivated(() => {
	clearInterval(state.timer);
});
</script>

<style lang="scss" scoped>
.sysInfo_table {
	width: 100%;
	min-height: 40px;
	line-height: 40px;
	text-align: center;
}

.sysInfo_td {
	border-bottom: 1px solid #e8e8e8;
	min-width: 100px;
}
</style>
